<template>
    <div class="main">
        <headNav title="修改密码"></headNav>
        <div class="content">
            <div class="oneRow">
                <input type="password" v-model.trim="oldWord" placeholder="原始密码">
            </div>
            <div class="oneRow">
                <input type="password" v-model.trim="newWord" placeholder="新密码，6-20之间">
            </div>
            <div class="oneRow">
                <input type="password" v-model="sureWord" placeholder="确认新密码">
            </div>
        </div>
        <div class="sureBtn" @click="sure">
            确定
        </div>
    </div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
export default {
    components: {
        headNav
    },
    data () {
        return {
            oldWord: '',
            newWord: '',
            sureWord: ''
        }
    },
    methods: {
        check () {
            if (!this.oldWord) {
                this.$vux.toast.text('请输入原始密码')
                return false
            }
            if (this.newWord.length < 6 || this.newWord.length > 20) {
                this.$vux.toast.text('新密码长度在6~20之间')
                return false
            }
            var ckAll = /^(?=.*)(?=.*[0-9])(?=.*[A-Za-z])(?=.*[~!@#$%^&*:;,.=?$\x22]).{6,20}$/
            if (!ckAll.test(this.newWord)){
                this.$vux.toast.text('新密码至少包含一个字母，一个数字和一个特殊字符')
                return false
            }
            if (this.newWord != this.sureWord) {
                this.$vux.toast.text('两次输入的密码不一致')
                return false
            }
            return true
        },
        sure () {
            if (!this.check()) {
                return
            }
            var params = {
                id: this.$store.getters['user/loginUserId'],
                param: {
                    oldPwd: this.oldWord,
                    newPwd: this.newWord,
                    confirmPwd: this.sureWord
                }   
            }
            this.$store.dispatch('personInfo/ChangePassWord', params).then(
                res => {
                    if (res) {
                        this.$vux.toast.text('修改成功')
                        Object.assign(this.$data, this.$options.data())
                        this.$router.go(-1)
                    }
                }
            )
        }
    }
}
</script>
<style scoped>
    .main{
        background: #fff;
    }
    .content{
        padding: 0 0.3rem;
    }
    .oneRow{
        padding: 0.2rem 0; 
        border-bottom: 0.01rem solid #dedede;
    }
    input{
        font-size: 0.32rem;
        width: 100%;
    }
    .sureBtn{
        font-size: 0.36rem;
        width: 80%;
        margin: 0.3rem auto;
        text-align: center;
        background: #39A8F5;
        color: #fff;
        padding: 0.2rem 0;
        border-radius: 0.4rem;
    }
</style>
